<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .hide {
      display: none
    }
  </style>
</head>
<body>
  <img class="hide" src="w.png" id="w">
  <img class="hide" src="e.png" id="e">
  <img class="hide" src="n.png" id="n">
  <img class="hide" src="s.png" id="s">
  <img class="hide" src="c.png" id="c">
  <div id="canvas"></div>
  <script src="/assets/lib/konva/konva.min.js"></script>
  <script>
    var directions = ['n', 'e', 's', 'w', 'c']
    var imgElems = {}
    directions.forEach(function(direction) {
      imgElems[direction] = document.getElementById(direction)
    })

    var mainSize = 50;
    var spaceSize = 30;

    var unitSize = 4 * spaceSize + 3 * mainSize;

    var unitCount = 4;

    var size = unitCount * unitSize;

    var stage = new Konva.Stage({
      container: 'canvas',
      width: size,
      height: size
    });

    var srcPos = [1, 1]
    var dstsPos = [[0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2]];

        var layer = new Konva.Layer();

    for (var row = 0; row < 4; row++) {
      
      var srcDirection = directions[row];

      for (var col = 0; col < 4; col++) {


        var baseX = col * unitSize;
        var baseY = row * unitSize;

        var srcX = baseX + (srcPos[0] + 1) * spaceSize + srcPos[0] * mainSize;
        var srcY = baseY + (srcPos[1] + 1) * spaceSize + srcPos[1] * mainSize;

        var srcImg = new Konva.Image({
          x: srcX,
          y: srcY,
          image: imgElems[srcDirection],
          width: mainSize,
          height: mainSize
        });
        layer.add(srcImg);
        
        var dstDirection = directions[col];

        for (var i = 0; i < dstsPos.length; i++) {
          var dstPos = dstsPos[i];
          var dstX = baseX + (dstPos[0] + 1) * spaceSize + dstPos[0] * mainSize;
          var dstY = baseY + (dstPos[1] + 1) * spaceSize + dstPos[1] * mainSize;
          var dstImg = new Konva.Image({
            x: dstX,
            y: dstY,
            image: imgElems[dstDirection],
            width: mainSize,
            height: mainSize,
            opacity: 0.5
          });
          layer.add(dstImg);
        }

        
      }
    }

    stage.add(layer);
    
  </script>
</body>
</html>